<template>
    <div class="app">
        <!-- 左侧菜单 -->
        <div class="left">
            <el-menu
                :default-active="activeMenu"
                class="el-menu-vertical-demo"
                router
                @select="selectMenu"
            >
                <el-menu-item index="/personal/index">
                    <i class="el-icon-location"></i>
                    <span slot="title">系统首页</span>
                </el-menu-item>
                <el-menu-item index="/personal/book">
                    <i class="el-icon-menu"></i>
                    <span slot="title">图书管理</span>
                </el-menu-item>
                <el-menu-item index="/personal/note">
                    <i class="el-icon-document"></i>
                    <span slot="title">文章管理</span>
                </el-menu-item>
                <el-submenu index="/">
                    <template slot="title">
                        <i class="el-icon-setting"></i>
                        <span>系统管理</span>
                    </template>
                    <el-menu-item index="/personal/system/user">用户管理</el-menu-item>
                    <el-menu-item index="/personal/system/log">日志管理</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>

        <!-- 右侧内容区域 -->
        <div class="right">
            <!-- 顶部导航（面包屑）-->
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                <el-breadcrumb-item v-for="item in pathList" :key="item.path" :to="{path: item.path}">
                    <span @click="clickBread(item.path)" >{{ item.name }}</span>
                </el-breadcrumb-item>
            </el-breadcrumb>

            <!-- 主内容区出口 -->
            <router-view />
        </div>
    </div>
</template>

<script>
    import { list, addBook, updateBook, delBook } from "@/api/book";

    export default {
        data() {
            return {
                total: 0,
                activeMenu: "",
                queryParams: {
                    keyWord: "",
                    pageNum: 1,
                    pageSize: 10
                },
                tableData: [],
                pathItem: {
                    name: "",
                    path: ""
                },
                pathList: [

                ]
            }
        },
        created() {
            this.pathItem.name = "系统首页";
            this.pathItem.path = "/personal/index";
            this.pathList.push(this.pathItem);
            this.getList();
            this.resetPathItem();
            this.activeMenu = "/personal/index";
        },
        methods: {
            // 选择左边菜单
            selectMenu(index) {
                this.activeMenu = index;

                // 操作面包屑数据
                const isExist = this.pathList.some(obj => obj.path === index);
                if (!isExist) {
                    if (index.includes("index")) {
                        this.pathItem.name = "系统首页";
                    }
                    if (index.includes("book")) {
                        this.pathItem.name = "图书管理";
                    }
                    if (index.includes("note")) {
                        this.pathItem.name = "文章管理";
                    }
                    if (index.includes("user")) {
                        this.pathItem.name = "用户管理";
                    }
                    if (index.includes("log")) {
                        this.pathItem.name = "日志管理";
                    }
                    this.pathItem.path = index;
                    this.pathList.push(this.pathItem);
                    this.resetPathItem();
                }
            },
            searchBook() {

            },
            getList() {
                list(this.queryParams).then(response => {
                    this.tableData = response.rows;
                    this.total = response.total;
                })
            },
            // 重置每次添加到路由中的对象
            resetPathItem() {
                this.pathItem = {
                    name: "",
                    path: ""
                }
            },
            // 点击面包屑上面的菜单，左侧的菜单一起联动
            clickBread(path) {
                console.log("###### ", path);
                this.activeMenu = path;
            }
        }
    }
</script>

<style>
    .app {
        display: flex;
    }
    .left {
        width: 200px;
        height: 100vh;
        margin-right: 5px;
    }
    .right {
        width: 90%;
        background: #fff;
    }
    .breadcrumb {
        padding: 10px 20px;
    }
    .demonstration {
        margin: 0 5px;
        font-size: 14px;
    }
    .search {
        margin-top: 30px;
        margin-right: 20px;
        text-align: right;
    }
    .table {
        width: 100%;
        margin-top: 30px;
    }
</style>
